<template>
  <div class="card">
    <div class="card-left">
      <img :src="user.avatar" class="card-left-avatar" />
    </div>
    <div class="card-right">
      <div class="title" @click="toDel(data)">
        <h1>{{ user.userName }}<span>{{user.opDepartmentName}}</span></h1>
        <div class="teg-right">
          <van-tag
            v-if="colorTag"
            size="large"
            :color="colorTag.color"
            :text-color="colorTag.textcolor"
            class="important-tag"
          >{{ UrgentLevel }}</van-tag>
        </div>
      </div>
      <div
        class="context"
      >
        <MyContext2
          :t="data.content"
          :a="data.targetDeptids"
          :isPublic="data.isPublic"
        ></MyContext2>
      </div>
      <div
        class="img-body"
        v-if="data.taskResourceList.length > 0"
      >
        <MyImgs :imgData='data.taskResourceList'></MyImgs>
      </div>
      <div class="card-tabbar" >
        <span @click="toDel(data)">{{Ac_statusForTime(data)}}</span>
        <div
          class="button"
          @click="run(data)"
          v-if="data.isAllowAccept===1"
        >我来接单</div>
        <!-- <div v-if="data.isAllowAccept===1">

          <div class="button-jd" v-if="data.taskAcceptList[0].ac_status == 0">已接单</div>
          <div class="button-js" v-if="data.taskAcceptList[0].ac_status == 3">已结束</div>
        </div> -->
      </div>
      <!-- 點評 -->
      <div
        class="task-comment"
        v-if="data.taskAcceptList.length > 0"
      >
        <div class="head">
          <p>
            <font
              v-for="acceptUser in data.taskAcceptList"
              :key="acceptUser"
            >
              {{ acceptUser.userName }},</font>
            <font style="color: #999">{{ data.taskAcceptList.length }}人已接单</font>
          </p>
        </div>
        <div class="body">
          <div
            class="comment-list"
            v-for="item in data.taskAcceptList"
            :key="item"
          >
            <div class="log" v-if="item.ac_status == 3">
               <MyContext2 :t="item.ac_finish_remak" :strongLabel='item.userName' :styleType="commentStyle"></MyContext2> 
            </div>
            <!-- <div class="log-imgs" v-if="item.taskacceptResourceList.length > 0">
              <MyImgs :imgData='item.taskacceptResourceList'></MyImgs>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Image as VanImage, tag } from "vant";
import MyContext2 from "@/components/task/context2.vue";
import MyImgs from "@/components/task/Imgs.vue";
import maps from "../../util/maps";
export default {
  name: "TaskCards",
  props: {
    data: Object
  },
  components: {
    [Button.name]: Button,
    [VanImage.name]: VanImage,
    [tag.name]: tag,
    MyContext2,
    MyImgs
  },
  data() {
    return {
      colorTag:{},
      acceptUsers: "",
      user: {},
      taskContext: {
        style: "task",
        text:
          "TEST人周六帮我整理一份财务表！月底前要完找个人周六帮我整理一份财务表！月底前要完找个人周六帮我整理一份财务表！月底前要完找个人周六帮我整理一份财务表！月底前要完找个人周六帮我整理一份财务表！月底前要完找个人周六帮我整理一份财务表！月底前要完找个人周六帮我整理一份财务表！月底前要完找个人周六帮我整理一份财务表！月底前要完"
      },
      taskComment: {
        style: "comment",
        text:
          "TEST非常顺利【我是字数超5行时效果展示，点击“全文”跳转到任务详情该条总结。我是字数超5行时效果展示，点击“全文”跳转到任务详情该条总结。我是字数超5行时效果展示，点击“全文”跳转到…",
        strongLabel: "周志香:",
        commentData: [
          {
            style: "comment",
            text:
              "TEST非常顺利【我是字数超5行时效果展示，点击“全文”跳转到任务详情该条总结。我是字数超5行时效果展示，点击“全文”跳转到任务详情该条总结。我是字数超5行时效果展示，点击“全文”跳转到…",
            strongLabel: "周志香:",
            imgs: [
              {
                url: "https://img.yzcdn.cn/vant/apple-2.jpg"
              },
              {
                url: "https://img.yzcdn.cn/vant/apple-1.jpg"
              }
            ]
          },
          {
            style: "comment",
            text: "TEST我做的最快",
            strongLabel: "李诗诗:"
          },
          {
            style: "comment",
            text: "TEST我做的最好",
            strongLabel: "李诗诗:"
          },
          {
            style: "comment",
            text: "TEST成功完成！",
            strongLabel: "王晓鑫:",
            personnel: {
              pic: "https://img.yzcdn.cn/vant/cat.jpeg",
              name: "TEST裘智",
              type: "面试",
              age: 23,
              phone: "13578062453",
              position: "财务专员"
            }
          }
        ]
      },
      colorObj: {
        styleA: false,
        styleB: true,
        showBorder: false
      }
    };
  },
  computed: {
    Ac_statusForTime() {
      return item => {
        return maps.getTimer(item);
      };
    },
    UrgentLevel() {
      return maps.urgentLevelMap[this.data.urgentLevel];
    }
  },
  mounted() {
    this.colorObj = {
      styleA: this.data.styleType == "A",
      styleB: this.data.styleType == "B",
      showBorder: this.data.styleType == "A"
    };
    this.init();
  },
  methods: {
    init() {
      this.user = this.data.createUser;
      this.colorTag = maps.urgentLevelColorMap[this.data.urgentLevel];
    },
    run(item) {
      let data = {
        taskId: item["id"],
        importentLevel: 1,
        urgentLevel: item.urgentLevel
      };
      this.$emit("run-parent", data);
    },
    toDel(item) {
      let data = {
        type: "toDEL",
        taskId: item["id"],
        importentLevel: 1,
        urgentLevel: item.urgentLevel
      };
      this.$emit("run-parent", data);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" >
@zi: 24px;
@h-zi: 30px;
.card {
  background: #fff;
  display: flex;
  padding: 30px 30px;
  margin-bottom: 30px;
  justify-content: stretch;
  .card-left {
    overflow: hidden;
    width: 100px;
    text-align: left;
    flex-shrink: 0;
    &-avatar{
      width:80px;
      height: 80px;
      border-radius: 8px;
    }
  }
  .card-right {
    text-align: left;
    flex-grow: 1;
    .title {
      display: flex;
      position: relative;
      h1 {
        font-weight: 400;
        font-size: @h-zi;
      }
      span{
        font-size: @zi;
        color: #999999;
        margin-left: 10px;
      }
      .teg-right {
        position: absolute;
        right: 0px;
      }
    }
    .context {
      padding: 15px 0;
      .total-introduce{
        font-weight: 400;
        font-size: 30px;
      }
    }
    .img-body {
    }
    .card-tabbar {
      color: #999999;
      font-size: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:20px 0;
      span {
        line-height: 30px;
        flex-grow: 1;
      }
      .button {
        background: #288ef4;
        color: #ffffff;
        width: 152px;
        flex-shrink: 0;
        text-align: center;
        font-size: 28px;
        height: 60px;
        line-height: 60px;
        border-radius: 8px;
      }
      .jd {
        background: #5eebd3;
        color: #ffffff;
      }
    }
    .task-comment {
      background: #f7f7f7;
      .head {
        padding: 20px;
        font-size: 26px;
        color: #576b95;
        border-bottom: 1px solid #e8e8e8;
      }
      .body {
        // padding: 20px;
        .comment-list {
          .log{
            padding: 0 20px;
          }
          .log-imgs{
            padding: 20px;
            .van-grid{
              .van-grid-item{
                .van-grid-item__content .van-grid-item__content--horizontal .van-grid-item__content--center .van-hairline {
                  background: none;
                  padding: 0;
                }
                .van-grid-item__content--horizontal {
                  background: none;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
